<template >
<div v-if="classNum==='1'">


  <el-row style="background-color: #545c64;">
    <el-col :span="24" >

      <el-row justify="center">
        <el-col :span="20" >
<!--          <ToolBar></ToolBar>-->
        </el-col>
      </el-row>

    </el-col>
  </el-row>

  <el-row justify="center"> <!--包含多年el-row el-col的大容器-->
    <el-col :span="20" >


<!--      <el-row >&lt;!&ndash;logo,搜索，二维码的展示&ndash;&gt;-->
<!--        <el-col :span="5" ><div style="background-color: red;">Logo</div></el-col>-->
<!--        <el-col :span="15"><div style="background-color: blue;">-->
<!--&lt;!&ndash;          <el-input v-model="input2" class="w-50 m-2" placeholder="Please Input" />&ndash;&gt;-->

<!--        </div></el-col>-->
<!--        <el-col :span="4"><div style="background-color: brown;">二维码</div></el-col>-->
<!--      </el-row>-->

      <!--猜你喜欢，商品展示部分-->
      <!--猜你喜欢-->
      <el-row>
        <el-col :span="18" >
          <h4>课程中心</h4>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col v-for="(course,index) in courseList"  :lg="8" :md="12" >
          <div class="courseLi" >
            <el-row  :gutter="20">
              <el-col :span="12">
                <router-link :to="{name:'courseDetial',query:{courseId:course.courseId}}">
                <el-image style="width: 100%;" :src="course.cover"></el-image></router-link>
              </el-col>
              <el-col :span="12">
                <!-- display: flex是一个弹性布局容器-->
                <div style="  height: 100%; display: flex;flex-direction: column;justify-content: space-between; ">

                  <router-link :to="{name:'courseDetial',query:{courseId:course.courseId}}" style="text-decoration:none;">
                    <h1>{{course.title}}<br/></h1>
<!--                      {{course.teaName}}-->
                  <span >
<!--                    课时：{{ course.lessonNum}}<br/>-->
                    简介：{{course.description}}</span>
                  </router-link>

                </div>
              </el-col>
            </el-row>
          </div>

        </el-col>
      </el-row>
    </el-col>

  </el-row>
</div>
  <div v-else-if="classNum==='0'">
    <h1>请先加入班级</h1>
  </div>

</template>

<script>
import {useLoginStateStore} from "../../store/storeLoginState.js";

export default {
  setup() {
    const loginStateStore = useLoginStateStore()
    return {
      loginStateStore: loginStateStore
    }
  },
  name: "stuCourse",
  data() {
    return {
      count:2,
      courseList:[],
      classNum:''
    }
  },

  mounted() {

    let  stuNum = window.sessionStorage.getItem("userNum")
    let _this = this;
    let url = "/studyadmin/classes/stuClass";

    _this.$axios.get(url,{params: {stuNum:stuNum}}).then(function(serverData) {
      if(serverData.data.count===0){
        // console.log("serverData.data.count====",serverData.data.count)
        // console.log("serverData.data.msg====",serverData.data.msg)

        _this.classNum='0'


      }else {
        _this.classNum='1'
        _this.show()
      }

    })
  },
  methods:{
    show(){
      let _this = this;
      let url = "/studyadmin/course/courseList";
      _this.$axios.post(url).then(function(serverData){
        console.log("服务端返回的数据为:",serverData);

        if(serverData.data.code==0){
          let courseList = serverData.data.data;
          for(let i=0;i<courseList.length;i++){
            _this.courseList.push(courseList[i]);
          }
        }
      }).catch(function(error){
        console.log("异步请求发生了错误:",error);
      })
    }

  },
}
</script>

<style>
.courseLi{
  height: 400px;
  background-color: aliceblue;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px gray;

}

</style>
